<template>
  <div class="process-table-container">
    <el-card>
      <div class="table-header">
        <!-- <span class="title">工艺</span> -->
        <!-- <div class="actions">
          <el-button
            type="primary"
            @click="addProcess"
          >添加</el-button>
          <el-button
            type="danger"
            @click="deleteProcess"
          >删除</el-button>
          <el-button
            type="warning"
            @click="replaceProcess"
          >替换</el-button>
        </div> -->
      </div>

      <el-table
        :data="processList"
        border
        stripe
        max-height="50vh"
      >
        <el-table-column
          prop="ROUTENO"
          label="顺序"
          width="80"
          align="center"
        />
        <el-table-column
          prop="WSNAME"
          label="工段"
          width="150"
        />
        <el-table-column
          prop="WPNAME"
          label="工序"
        />
        <el-table-column
          prop="BOMDOSAGE"
          label="单台数"
          width="100"
          align="center"
        />
        <el-table-column
          prop="PREPARETIME"
          label="准备时间"
          width="100"
          align="center"
        />
        <el-table-column
          prop="AVERAGEWORKTIME"
          label="平均工时"
          width="100"
          align="center"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ProcessTable',
  props: {
    // 从父组件接收的工艺数据
    processList: {
      type: Array || Object,
      required: true,
      default: () => [
        // 默认数据结构和图片中一致
        { order: 1, section: '定子大工段', process: '1010 辅料', quantity: 1, prepTime: 0, avgTime: 41.72, outsourced: '否' },
        { order: 2, section: '定子大工段', process: '2010 插槽纸', quantity: 1, prepTime: 0, avgTime: 7.53, outsourced: '否' },
        // 其他默认数据...
      ],
      validator: (value) => {
        // 验证数据格式
        return true;
        // return value.every(item =>
        //   'order' in item &&
        //   'section' in item &&
        //   'process' in item &&
        //   'quantity' in item &&
        //   'prepTime' in item &&
        //   'avgTime' in item &&
        //   'outsourced' in item
        // );
      }
    }
  },
  methods: {
    addProcess () {
      this.$emit('add-process');
    },
    deleteProcess () {
      this.$emit('delete-process');
    },
    replaceProcess () {
      this.$emit('replace-process');
    }
  }
}
</script>

<style scoped>
.process-table-container {
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-header .title {
  font-size: 18px;
  font-weight: bold;
}

.el-table {
  margin-top: 10px;
}

.el-tag {
  margin: 2px 0;
}
</style>